<script setup>
import {useUserStore} from "@/stores/user.js";
import {ref} from "vue";
import {useRouter} from "vue-router";

const userStore = useUserStore();
const router = useRouter();
const address_text1 = ref();
const address_text2 = ref();
const address_text3 = ref();
const name = ref();
const phone = ref();
const saveAddress = () => {
  console.log(address_text1.value, address_text2.value, address_text3.value, name.value, phone.value);
  // 判断输入是否为空
  if (!address_text1.value || !address_text2.value || !address_text3.value || !name.value || !phone.value) {
    alert("请将信息填写完整");
    return;
  }
  userStore.addUser({
    address_text: ''.concat(address_text1.value, address_text2.value, address_text3.value),
    name:name.value, phone:phone.value
  });
  console.log(55)
  router.push({
    name: "address"
  })
}
</script>

<template>
  <div class="create_address">
    <div class="create_address_header">
      <span class="iconfont title_back" @click="$router.push({name: 'address'})">&#xe697;</span>
      <div class="title_text">新建收货地址</div>
      <div class="save" @click="saveAddress">保存</div>
    </div>
    <div class="create_address_form">
      <div class="form_item">
        <div class="form_item_label">所在城市:</div>
        <input type="text" class="form_item_content" placeholder="如北京市" v-model="address_text1">
      </div>
      <div class="form_item">
        <div class="form_item_label">小区/大厦/学校:</div>
        <input type="text" class="form_item_content" placeholder="如理工大学国防科技园" v-model="address_text2">
      </div>
      <div class="form_item">
        <div class="form_item_label">楼号-门牌号:</div>
        <input type="text" class="form_item_content" placeholder="如A号楼B层" v-model="address_text3">
      </div>
      <div class="form_item">
        <div class="form_item_label">收货人:</div>
        <input type="text" class="form_item_content" placeholder="请填写收货人姓名" v-model="name">
      </div>
      <div class="form_item">
        <div class="form_item_label">联系电话:</div>
        <input type="text" class="form_item_content" placeholder="请填写收货手机号" v-model="phone">
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";

.create_address {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
    padding: .08rem .18rem;
    font-size: .16rem;
    color: $content-fontcolor;
    text-align: center;
    line-height: .24rem;
    background-color: $bgColor;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
  }

  &_form {
    margin-top: .4rem;
    padding: 0 .18rem;
    background-color: $bgColor;
    font-size: .14rem;

    .form_item {
      display: flex;
      padding: .12rem;
      line-height: .2rem;
      border-top: .01rem solid $content-bgColor;

      &_content {
        flex: 1;
        margin-left: .08rem;
        border: none;
        outline: none;
      }
    }
  }
}
</style>